<script setup>
	import {
		ref
	} from 'vue'
</script>

<template>
	<view class="challenge-container">
		<view class="challenge-card">
			<view class="card-header">
				<view class="card-title">本周减排挑战</view>
				<view class="card-subtitle">由于您上周的数据对比，您这周的减排任务有：</view>
			</view>
			<view class="card-list">
				<checkbox-group name="checkbox" class="checkbox-group">
					<label>
						<view class="label-item">
							<u-icon name="/static/icons/dot.png" size="28"></u-icon>
							<text>完成3次公交出行</text>
							<checkbox value="checkbox1" class="checkbox"/>
						</view>
					</label>
					<label>
						<view class="label-item">
							<u-icon name="/static/icons/dot.png" size="28"> </u-icon>
							<text>减少2次外卖包装</text>
							<checkbox value="checkbox2" class="checkbox"/>
						</view>
					</label>
					<label>
						<view class="label-item">
							<u-icon name="/static/icons/dot.png" size="28"></u-icon>
							<text>减少3次一次性筷子</text>
							<checkbox value="checkbox3" class="checkbox3"/>
						</view>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.challenge-container {
		padding: 56rpx 40rpx;

		.challenge-card {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.card-header {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.card-title {
					font-size: 36rpx;
					font-weight: 600;
					color: #333333;
					margin-bottom: 20rpx;
				}

				.card-subtitle {
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
				}
			}

			.card-list {
				width: 100%;
				margin-top: 30rpx;	
				.checkbox-group {
					display: flex;
					flex-direction: column;
					justify-content: center;
					// align-items: space-around;

					label {
						margin-bottom: 10rpx;
						.label-item {
							display: flex;
							flex-direction: row;
							justify-content: left;
							align-items: center;
							padding: 0 50rpx;
							
							.checkbox{
								margin-left: 204rpx;
							}

							.checkbox3{
								margin-left: 178rpx;
							}	
							text {
								font-size: 28rpx;
								font-weight: 400;
								color: #666666;
							}
						}

					}
				}
			}
		}


	}
</style>